<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blue Ocean Environmental Protection - Protecting Marine Ecology</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        .carousel-item {
            height: 500px;
            background-size: cover;
            background-position: center;
        }
        .mission-card {
            border: 2px solid #0d6efd;
            transition: transform 0.3s;
        }
        .mission-card:hover {
            transform: translateY(-10px);
        }
        footer {
            background-color: #1a3650;
            color: white;
        }
    </style>
</head>
<body>

<!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>


<!-- 轮播图 -->
<div id="carouselExample" class="carousel slide mt-5" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="/images/er.jpg" class="d-block w-100" alt="海洋保护">
            <div class="carousel-caption d-none d-md-block">
                <h2>Protect the blue planet</h2>
                <p>Build sustainable marine ecosystems</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="/images/tr.jpg" class="d-block w-100" alt="海洋生物">
        </div>
    </div>
</div>

<!-- 公司简介 -->
<section id="about" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="mb-4">About Blue Ocean Environmental Protection</h2>
                <p class="lead">Founded in 2010, Blue Ocean Environmental Protection is a scientific and technological innovation enterprise focusing on marine environmental protection. We are committed to protecting marine ecosystems through technology development, environmental monitoring and public education.</p>
                <p>Our team of oceanographers, environmental engineers and environmental volunteers has been involved in 50 marine conservation projects covering major coastal areas in China.</p>
            </div>
            <div class="col-lg-6">
                <img src="/images/tu.jpg" class="img-fluid rounded" alt="Marine ecology">
            </div>
        </div>
    </div>
</section>

<!-- 核心使命 -->
<section id="mission" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">Our Mission</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card mission-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-trash fs-1 text-primary"></i>
                        <h5 class="card-title mt-3">Marine pollution control</h5>
                        <p class="card-text">Develop a smart garbage recycling system and implement a shoreline cleanup program</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mission-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-book fs-1 text-primary"></i>
                        <h5 class="card-title mt-3">Environmental education and promotion</h5>
                        <p class="card-text">Carry out marine protection science popularization activities, covering 100,000 people every year</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mission-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-globe fs-1 text-primary"></i>
                        <h5 class="card-title mt-3">Ecological restoration project</h5>
                        <p class="card-text">Coral reef restoration, mangrove planting and other ecological restoration projects</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>
 <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>